<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>svg</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.svg{
			width: 1200px;
		    height: 800px;
		    border: 1px solid #f2f2f2;
		    position: absolute;
		    top: 50%;
		    transform: translate(-50%,-50%);
		    left: 50%;
		}
		/**
		 * 国旗 = 旗杆 + 旗帜
		 * 画弧
		 * A rx ry x-axis-rotation large-arc-flag sweep-flag x y
		 */
		.flag-post-header{
			stroke: none;
			fill: url(#flagPostHeader);
		}
		.flag-post-body{
			fill: url(#flagPostBody);
			stroke: none;
		}
		.flag{
			fill: #fb001b;
		}
	</style>
	<script type="text/javascript"></script>
</head>
<body>
	<svg class="svg">
		<defs>
	        <radialGradient id="flagPostHeader" cx="25%" cy="35%" r="40%" fx="30%" fy="30%">
	           <stop offset="0%" stop-color="white"/>
	           <stop offset="100%" stop-color="orange"/>
	      	</radialGradient>
			<linearGradient id="flagPostBody" x1="0%" y1="0%" x2="100%" y2="0%">
		        <stop offset="0%" stop-color="#727377"/>
		        <stop offset="30%" stop-color="#d8d8cf"/>
		        <stop offset="70%" stop-color="#d8d8cf"/>
		        <stop offset="100%" stop-color="#727377"/>
		    </linearGradient>
		</defs>
		<!-- 旗杆 -->
		<path d="
			M 95 100
			V 800 
			H 105
			V 100
			Z" 
		class="flag-post-body"/>
		<!-- 旗顶 -->
      	<path d="
			M 100 105
			A 10 10 0 1 0 99.99999 105
			Z" 
			class="flag-post-header"/>
		<!-- 红旗 -->
		<path d="
			M 106 103
			V 333 
			H 436 
			V 103 
			Z" 
			class="flag"/>
		<!-- 星星 -->
		<path d="
			M124 160
			L182 160
			L135 190
			L153 140
			L171 190
			Z"
			fill="#ff0" />
		<path d="
			M185 126
			L213 126
			L190 141
			L199 116
			L208 141
			Z"
			fill="#ff0"
			transform="rotate(-45 204 131)" />
		<path d="
			M212 150
			L240 150
			L217 165
			L226 140
			L235 165
			Z"
			fill="#ff0" 
			transform="rotate(-13 226 155)" />
		<path d="
			M212 180
			L240 180
			L217 195
			L226 170
			L235 195
			Z"
			fill="#ff0" />
		<path d="
			M185 203
			L213 203
			L190 218
			L199 193
			L208 218
			Z"
			fill="#ff0"
			transform="rotate(30 199 208)" />
	</svg>
</body>
</html>